import React from 'react';
import {format} from 'date-fns';
// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

import './scss/echartarea.scss';

export default class EchartLine extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let echartData = this.props.lineChartData;
    this.drawEchartData(echartData);
  }

  componentWillReceiveProps(nextProps) {
    let nextEchartData = nextProps.lineChartData;
    this.drawEchartData(nextEchartData);
  }

  // echart
  drawEchartData(echartData) {
    // 处理需要的数据
    
    let myChart   = echarts.init(this.refs.echartTypeLine),
        data      = echartData,
        addAllW   = 0,
        totalTime = 0;
    // 处理找出最大的时长
    for(let i = 0; i < data.length; i++){
      addAllW += (data[i].playerTime>0?10:0);
      totalTime += data[i].playerTime;
    };
    // 统计图配置
    myChart.setOption({
      // 直角坐标系内的区域
      grid: { left: 40, right: 40, top: 50, bottom: 30, containLabel: false },
      // 提示框
      tooltip: { 
        trigger: 'item', 
        padding: [5, 10], 
        backgroundColor: "#3d83fe", 
        textStyle: { 
          fontSize: 12,
          color: '#fff'
        },
        axisPointer: {
          type: 'shadow',
          snap: true,
          // shadowStyle: { color: 'rgba(255, 255, 255, .1)' }
        },
        formatter: (params) => {
          // let index     = params[0].dataIndex,
          //     splitData = params[0].axisValue.split('/');
          // 告警总次数：${params[0].value}<br/>
          let index     = params.dataIndex,
              splitData = params.name.split('/');
          return `<div className="tooltip">
                    ${splitData[0]}年${splitData[1]}月${splitData[2]}日<br/>
                    告警总次数：${params.value}<br/>
                    音频总时长：${data[index].playerTime}小时
                  </div>`;
        },
      },
      // calculable : true,
      // x轴
      xAxis: {
        show: true, gridIndex: 0, position: 'bottom',
        // name: '日期',
        nameLocation: 'end', boundaryGap : false, type: 'category',
        axisPointer: { show: false, lineStyle: { color: '#7866FF' } },
        splitLine: { show: false, lineStyle: { color: '#0294FF' } },
        axisTick: {show: false},
        axisLabel: { textStyle: { color: '#7484cb' } },
        boundaryGap: false,
        data: data.map( item => format(item.countDate, 'YYYY/MM/DD'))
      },
      // y轴
      yAxis: {
        show: false, type: 'value', name: '告警总次数',
        nameLocation: 'end',
        splitLine: { show: false },
        nameTextStyle: { color: '#252D40', fontSize: '14px', fontFamily: 'Microsoft YaHei' },
      },
      // 折线面积
      series: [{
        name: '播放时长', type: 'line', smooth: true, symbol: 'circle',
        data: data.map(item => item.alarmNum),
        symbolSize: (value, params) => {
          let index = params.dataIndex,
            w = addAllW * (data[index].playerTime/totalTime);
          return w;
        },
        cursor: 'pointer',
        lineStyle: { color: '#3D83FE' },
        itemStyle: { borderColor: '#3D83FE', color: '#3D83FE'},
        areaStyle: { color: 'transparent' },
      }]
    }, true);
  }

  render() {
    return (
      <div className="echart-type-area" ref="echartTypeLine">
      
      </div>
    )
  }
}